<template>
    <div class="app-container">
      <div class="header">
        <Header @register="register" :LoginOrRegister="LoginOrRegister"/>
      </div>
      <div class="main">
        <Main :LoginOrRegister="LoginOrRegister" />
      </div>
      <div class="footer">
        <Footer />
      </div>
    </div>
  </template>
  
  <script setup>
  import Header from '@/components/Header.vue'
  import Main from '@/components/Main.vue'
  import Footer from '@/components/Footer.vue'
  import { ref } from 'vue'

  const LoginOrRegister = ref('1')
  const register = (data)=>{
    LoginOrRegister.value = data
  }
  </script>
  
  <style scoped>
  .header{
      width: calc(100% - 20px);
      padding: 10px 30px;
      position: fixed;
      top: 0;
      box-shadow: rgba(0, 21, 41, 0.35) 2px 0px 6px;
      background-color: #fff;
      z-index: 999;
  }
  .main{
      margin: 100px auto;
      max-width: 1260px;
      min-height: calc(100vh - 60px);
      padding: 0 30px;
  }
  .footer {
      width: 100%;
      height: 60px;
      line-height: 40px;
      text-align: center;
      color: #666;
      font-size: 12px;
      box-shadow: rgba(0, 21, 41, 0.35) 2px 0px 6px;
      background-color: #fff;
  }
  </style>
  